<template>
  <div>
    <el-dialog :visible.sync="dialog.detail" title="发货详情" width="80%" append-to-body>
      <div class="detail-info">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">订单号：</span>
            <span v-text="form.orderNo"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">订单是否可用：</span>
            <span v-text="form.orderIsActive"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">店铺标题：</span>
            <span v-text="form.shopTitle"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">店铺是否可用：</span>
            <span v-text="form.shopIsActive"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">收货人：</span>
            <span v-text="form.realName"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">手机号：</span>
            <span v-text="form.phone"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">省：</span>
            <span v-text="form.province"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">市：</span>
            <span v-text="form.city"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">区/县：</span>
            <span v-text="form.district"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">地址别名：</span>
            <span v-text="form.addressAlias"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">详细地址：</span>
            <span v-text="form.address"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">门牌号：</span>
            <span v-text="form.area"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">是否已发货：</span>
            <span v-text="form.isDeliver"></span>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <span class="detail-title">收货方式：</span>
            <span v-text="form.deliverType"></span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-divider content-position="left">物流信息(可添加或修改)</el-divider>
        <el-form ref="logisticsForm" :model="form" label-width="120px" :rules="validateRules">
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="物流公司名称" prop="logisticsCompany">
                <el-input
                  type="textarea"
                  v-model="form.logisticsCompany"
                  placeholder="请输入物流公司名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
              <el-form-item label="物流公司编码" prop="logisticsCode">
                <el-input v-model="form.logisticsCode" placeholder="请输入物流公司编码" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
              <el-form-item label="物流单号" prop="logisticsNo">
                <el-input v-model="form.logisticsNo" placeholder="请输入物流单号" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="margin-top: 10px;">
        <el-divider content-position="left">订单项列表</el-divider>
        <el-table
          ref="dataTable"
          v-loading="table.loading"
          stripe
          :data="table.tableRows"
          style="margin-top: 20px;"
        >
          <el-table-column v-if="isMultipleTable" type="selection" :selectable="selectable"></el-table-column>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column
            property="goodsTitle"
            label="商品标题"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column property="skuPicUrl" label="SKU图片" min-width="120px">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                fit="contain"
                :src="scope.row.skuPicUrl ? scope.row.skuPicUrl.indexOf('http') >= 0 ? scope.row.skuPicUrl : resUrl + scope.row.skuPicUrl : ''"
                :preview-src-list="[scope.row.skuPicUrl ? scope.row.skuPicUrl.indexOf('http') >= 0 ? scope.row.skuPicUrl : resUrl + scope.row.skuPicUrl : '']"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            property="skuIsActive"
            label="SKU是否可用"
            min-width="120px"
            sortable
            show-overflow-tooltip
            :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
          ></el-table-column>
          <el-table-column
            property="skuTitle"
            label="售卖标题"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="skuInfo"
            label="SKU规格信息"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="quantity"
            label="购买数量"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="payAmount"
            label="实付金额（元）"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="discountAmount"
            label="优惠金额（元）"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="integralAmount"
            label="赠送积分"
            min-width="120px"
            sortable
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="dialog.detail = false;">取消</el-button>
        <el-button v-if="this.orderStatus === 3" type="primary" @click="doDeliver">确认</el-button>
        <el-button v-else type="primary" @click="doDeliver">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'GoodsOrderDeliverDialog',
  components: {},
  data() {
    return {
      dialog: {
        detail: false,
      },
      form: {
        id: undefined,
        orderNo: undefined,
        orderIsActive: undefined,
        shopId: undefined,
        shopTitle: undefined,
        shopIsActive: undefined,
        realName: undefined,
        phone: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        addressAlias: undefined,
        address: undefined,
        area: undefined,
        isDeliver: undefined,
        deliverType: undefined,
        logisticsCompany: undefined,
        logisticsCode: undefined,
        logisticsNo: undefined,
        version: undefined,
        createTime: undefined,
        updateTime: undefined,
        isActive: undefined,
      },
      logisticsForm: {},
      validateRules: {
        logisticsCompany: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 255,
            message: '必须1-255个字符',
            trigger: 'blur',
          },
        ],
        logisticsCode: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 20,
            message: '必须1-20个字符',
            trigger: 'blur',
          },
        ],
        logisticsNo: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 32,
            message: '必须1-32个字符',
            trigger: 'blur',
          },
        ],
      },
      dataDictCodes: ['YES_NO', 'DELIVER_TYPE'],
      dataDictItems: [],
      resUrl: resUrl,
      orderId: undefined,
      orderStatus: undefined,
      isMultipleTable: false,
      isSingleTable: false,
      isOnlyShowTable: true,
      table: {
        loading: false,
        tableRows: [],
        pageSelection: {},
        allSelection: [],
        currentRow: {},
      },
    }
  },
  computed: {},
  mounted() {},
  methods: {
    getDictItemsDisplayValue() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            if (response) {
              utils.getDetailDictItemDisplayValue({
                mainComponent: this,
                dataDictItems: response,
                dictCode: 'YES_NO',
                formProp: 'orderIsActive',
              })
              utils.getDetailDictItemDisplayValue({
                mainComponent: this,
                dataDictItems: response,
                dictCode: 'YES_NO',
                formProp: 'shopIsActive',
              })
              utils.getDetailDictItemDisplayValue({
                mainComponent: this,
                dataDictItems: response,
                dictCode: 'YES_NO',
                formProp: 'isDeliver',
              })
              utils.getDetailDictItemDisplayValue({
                mainComponent: this,
                dataDictItems: response,
                dictCode: 'DELIVER_TYPE',
                formProp: 'deliverType',
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    formatterDict(cellValue, dictCode) {
      return utils.getDataDictItemDisplayValue({
        dataDictItems: this.dataDictItems,
        dictCode: dictCode,
        value: cellValue,
      }).displayValue
    },
    initLogistics(order) {
      this.orderId = order.id
      this.orderStatus = order.orderStatus
      utils
        .doGet('/goods-order-logistics/admin/one/' + order.id, {})
        .then((res) => {
          this.form = res.data
          this.logisticsForm = JSON.parse(JSON.stringify(this.form))
          this.getDictItemsDisplayValue()
        })
        .catch((err) => {})
    },
    initOrderItemTable(orderId) {
      utils
        .doPostJson(
          '/goods-order-item/admin/all-cond',
          {
            orderId: orderId,
          },
          {}
        )
        .then((response) => {
          this.table.loading = false
          this.table.tableRows = response.data.rows
        })
        .catch((error) => {
          this.table.loading = false
        })
    },
    doDeliver() {
      this.$refs.logisticsForm.validate((valid) => {
        if (valid) {
          this.logisticsForm.logisticsCompany = this.form.logisticsCompany
          this.logisticsForm.logisticsCode = this.form.logisticsCode
          this.logisticsForm.logisticsNo = this.form.logisticsNo
          this.$emit('doDeliver', this.logisticsForm)
        }
      })
    },
  },
}
</script>

<style>
</style>
